<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
	<title>“组团啦”杯比赛详情</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.css"/>
	<link rel="stylesheet" type="text/css" href="css/bootstrap-modal.css"/>
	<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" href="css/public.css" />
</head>
<body>
<section id="top-space"></section>
<div class="wrapper center-block">
	<ul id="details-team-note" class="team-note" style="margin-top:0;">
		<li class="z-red"><span class="sq-red"></span>失败队伍</li>
		<li class="z-green"><span class="sq-green"></span>胜利队伍</li>
	</ul>
</div>
<div id="details-wrapper">
	<div class="wrapper center-block">
		<div class="rec-parent table-wrapper">
			<table>
				<tr>
					<th>日期</th>
					<th>开始</th>
					<th>时长</th>
					<th>类型</th>
				</tr>
				<tr class="s-td">
					<td>03-14</td>
					<td>12:55</td>
					<td>24分钟</td>
					<td>匹配赛</td>
				</tr>
			</table>
			<span class="rec-1"></span>
			<span class="rec-2"></span>
			<span class="rec-3"></span>
			<span class="rec-4"></span>
		</div>
		<div class="rec-parent table-wrapper">
			<table>
				<tr>
					<th colspan="2">人头比</th>
					<th colspan="2">金钱比</th>
				</tr>
				<tr>
					<td>0（0）</td>
					<td>2（0）</td>
					<td>43%</td>
					<td>57%</td>
				</tr>
			</table>
			<span class="rec-1"></span>
			<span class="rec-2"></span>
			<span class="rec-3"></span>
			<span class="rec-4"></span>
		</div>
		<div class="rate-part">
			<div class="row">
				<div class="col-xs-6">
					<p class="text-center title-s">反野率</p>
					<div class="rate-box rec-parent">
						<div class="rate-shadow">
							<span class="rate-progress bg-green">40%</span>
						</div>
						<span class="rec-1"></span>
						<span class="rec-2"></span>
						<span class="rec-3"></span>
						<span class="rec-4"></span>
					</div>
					<div class="rate-box rec-parent">
						<div class="rate-shadow">
							<span class="rate-progress bg-red">60%</span>
						</div>
						<span class="rec-1"></span>
						<span class="rec-2"></span>
						<span class="rec-3"></span>
						<span class="rec-4"></span>
					</div>
				</div>
				<div class="col-xs-6">
					<p class="text-center title-s">大小龙控制率</p>
					<div class="rate-box rec-parent">
						<div class="rate-shadow">
							<span class="rate-progress bg-green">30%</span>
						</div>
						<span class="rec-1"></span>
						<span class="rec-2"></span>
						<span class="rec-3"></span>
						<span class="rec-4"></span>
					</div>
					<div class="rate-box rec-parent">
						<div class="rate-shadow">
							<span class="rate-progress bg-red">100%</span>
						</div>
						<span class="rec-1"></span>
						<span class="rec-2"></span>
						<span class="rec-3"></span>
						<span class="rec-4"></span>
					</div>
				</div>
			</div>
		</div>
		<section>
			<div class="row">
				<div class="col-xs-4">
					<div class="portait-l-box">
						<div class="portait-s oh beCircle center-block">
							<img src="img/portrait2.jpg" alt=""/>
						</div>
						<p class="title-name z-green text-center">你今天充值了嘛</p>
					</div>
				</div>
				<div class="col-8-table col-xs-8">
					<div class="rec-parent table-wrapper">
						<table>
							<tr>
								<th>评分</th>
								<th>KDA</th>
								<th>金钱</th>
							</tr>
							<tr class="s-td">
								<td>9.8</td>
								<td>6/1/3</td>
								<td>8.6K</td>
							</tr>
						</table>
						<span class="rec-1"></span>
						<span class="rec-2"></span>
						<span class="rec-3"></span>
						<span class="rec-4"></span>
					</div>
				</div>
			</div>
			<div class="rec-parent table-wrapper">
				<table>
					<tr>
						<th>补兵&野怪</th>
						<th>输出伤害</th>
						<th>承受伤害</th>
						<th>插&反眼</th>
					</tr>
					<tr class="s-td">
						<td>250</td>
						<td>10730</td>
						<td>22038</td>
						<td>7/0</td>
					</tr>
				</table>
				<span class="rec-1"></span>
				<span class="rec-2"></span>
				<span class="rec-3"></span>
				<span class="rec-4"></span>
			</div>
		</section>
		<section>
			<div class="row">
				<div class="col-xs-4">
					<div class="portait-l-box">
						<div class="portait-s oh beCircle center-block">
							<img src="img/portrait2.jpg" alt=""/>
						</div>
						<p class="title-name z-green text-center">你今天充值了嘛</p>
					</div>
				</div>
				<div class="col-8-table col-xs-8">
					<div class="rec-parent table-wrapper">
						<table>
							<tr>
								<th>评分</th>
								<th>KDA</th>
								<th>金钱</th>
							</tr>
							<tr class="s-td">
								<td>9.8</td>
								<td>6/1/3</td>
								<td>8.6K</td>
							</tr>
						</table>
						<span class="rec-1"></span>
						<span class="rec-2"></span>
						<span class="rec-3"></span>
						<span class="rec-4"></span>
					</div>
				</div>
			</div>
			<div class="rec-parent table-wrapper">
				<table>
					<tr>
						<th>补兵&野怪</th>
						<th>输出伤害</th>
						<th>承受伤害</th>
						<th>插&反眼</th>
					</tr>
					<tr class="s-td">
						<td>250</td>
						<td>10730</td>
						<td>22038</td>
						<td>7/0</td>
					</tr>
				</table>
				<span class="rec-1"></span>
				<span class="rec-2"></span>
				<span class="rec-3"></span>
				<span class="rec-4"></span>
			</div>
		</section><section>
		<div class="row">
			<div class="col-xs-4">
				<div class="portait-l-box">
					<div class="portait-s oh beCircle center-block">
						<img src="img/portrait2.jpg" alt=""/>
					</div>
					<p class="title-name z-green text-center">你今天充值了嘛</p>
				</div>
			</div>
			<div class="col-8-table col-xs-8">
				<div class="rec-parent table-wrapper">
					<table>
						<tr>
							<th>评分</th>
							<th>KDA</th>
							<th>金钱</th>
						</tr>
						<tr class="s-td">
							<td>9.8</td>
							<td>6/1/3</td>
							<td>8.6K</td>
						</tr>
					</table>
					<span class="rec-1"></span>
					<span class="rec-2"></span>
					<span class="rec-3"></span>
					<span class="rec-4"></span>
				</div>
			</div>
		</div>
		<div class="rec-parent table-wrapper">
			<table>
				<tr>
					<th>补兵&野怪</th>
					<th>输出伤害</th>
					<th>承受伤害</th>
					<th>插&反眼</th>
				</tr>
				<tr class="s-td">
					<td>250</td>
					<td>10730</td>
					<td>22038</td>
					<td>7/0</td>
				</tr>
			</table>
			<span class="rec-1"></span>
			<span class="rec-2"></span>
			<span class="rec-3"></span>
			<span class="rec-4"></span>
		</div>
	</section><section>
		<div class="row">
			<div class="col-xs-4">
				<div class="portait-l-box">
					<div class="portait-s oh beCircle center-block">
						<img src="img/portrait2.jpg" alt=""/>
					</div>
					<p class="title-name z-green text-center">你今天充值了嘛</p>
				</div>
			</div>
			<div class="col-8-table col-xs-8">
				<div class="rec-parent table-wrapper">
					<table>
						<tr>
							<th>评分</th>
							<th>KDA</th>
							<th>金钱</th>
						</tr>
						<tr class="s-td">
							<td>9.8</td>
							<td>6/1/3</td>
							<td>8.6K</td>
						</tr>
					</table>
					<span class="rec-1"></span>
					<span class="rec-2"></span>
					<span class="rec-3"></span>
					<span class="rec-4"></span>
				</div>
			</div>
		</div>
		<div class="rec-parent table-wrapper">
			<table>
				<tr>
					<th>补兵&野怪</th>
					<th>输出伤害</th>
					<th>承受伤害</th>
					<th>插&反眼</th>
				</tr>
				<tr class="s-td">
					<td>250</td>
					<td>10730</td>
					<td>22038</td>
					<td>7/0</td>
				</tr>
			</table>
			<span class="rec-1"></span>
			<span class="rec-2"></span>
			<span class="rec-3"></span>
			<span class="rec-4"></span>
		</div>
	</section><section>
		<div class="row">
			<div class="col-xs-4">
				<div class="portait-l-box">
					<div class="portait-s oh beCircle center-block">
						<img src="img/portrait2.jpg" alt=""/>
					</div>
					<p class="title-name z-green text-center">你今天充值了嘛</p>
				</div>
			</div>
			<div class="col-8-table col-xs-8">
				<div class="rec-parent table-wrapper">
					<table>
						<tr>
							<th>评分</th>
							<th>KDA</th>
							<th>金钱</th>
						</tr>
						<tr class="s-td">
							<td>9.8</td>
							<td>6/1/3</td>
							<td>8.6K</td>
						</tr>
					</table>
					<span class="rec-1"></span>
					<span class="rec-2"></span>
					<span class="rec-3"></span>
					<span class="rec-4"></span>
				</div>
			</div>
		</div>
		<div class="rec-parent table-wrapper">
			<table>
				<tr>
					<th>补兵&野怪</th>
					<th>输出伤害</th>
					<th>承受伤害</th>
					<th>插&反眼</th>
				</tr>
				<tr class="s-td">
					<td>250</td>
					<td>10730</td>
					<td>22038</td>
					<td>7/0</td>
				</tr>
			</table>
			<span class="rec-1"></span>
			<span class="rec-2"></span>
			<span class="rec-3"></span>
			<span class="rec-4"></span>
		</div>
	</section><section>
		<div class="row">
			<div class="col-xs-4">
				<div class="portait-l-box">
					<div class="portait-s oh beCircle center-block">
						<img src="img/portrait2.jpg" alt=""/>
					</div>
					<p class="title-name z-green text-center">你今天充值了嘛</p>
				</div>
			</div>
			<div class="col-8-table col-xs-8">
				<div class="rec-parent table-wrapper">
					<table>
						<tr>
							<th>评分</th>
							<th>KDA</th>
							<th>金钱</th>
						</tr>
						<tr class="s-td">
							<td>9.8</td>
							<td>6/1/3</td>
							<td>8.6K</td>
						</tr>
					</table>
					<span class="rec-1"></span>
					<span class="rec-2"></span>
					<span class="rec-3"></span>
					<span class="rec-4"></span>
				</div>
			</div>
		</div>
		<div class="rec-parent table-wrapper">
			<table>
				<tr>
					<th>补兵&野怪</th>
					<th>输出伤害</th>
					<th>承受伤害</th>
					<th>插&反眼</th>
				</tr>
				<tr class="s-td">
					<td>250</td>
					<td>10730</td>
					<td>22038</td>
					<td>7/0</td>
				</tr>
			</table>
			<span class="rec-1"></span>
			<span class="rec-2"></span>
			<span class="rec-3"></span>
			<span class="rec-4"></span>
		</div>
	</section><section>
		<div class="row">
			<div class="col-xs-4">
				<div class="portait-l-box">
					<div class="portait-s oh beCircle center-block">
						<img src="img/portrait2.jpg" alt=""/>
					</div>
					<p class="title-name z-green text-center">你今天充值了嘛</p>
				</div>
			</div>
			<div class="col-8-table col-xs-8">
				<div class="rec-parent table-wrapper">
					<table>
						<tr>
							<th>评分</th>
							<th>KDA</th>
							<th>金钱</th>
						</tr>
						<tr class="s-td">
							<td>9.8</td>
							<td>6/1/3</td>
							<td>8.6K</td>
						</tr>
					</table>
					<span class="rec-1"></span>
					<span class="rec-2"></span>
					<span class="rec-3"></span>
					<span class="rec-4"></span>
				</div>
			</div>
		</div>
		<div class="rec-parent table-wrapper">
			<table>
				<tr>
					<th>补兵&野怪</th>
					<th>输出伤害</th>
					<th>承受伤害</th>
					<th>插&反眼</th>
				</tr>
				<tr class="s-td">
					<td>250</td>
					<td>10730</td>
					<td>22038</td>
					<td>7/0</td>
				</tr>
			</table>
			<span class="rec-1"></span>
			<span class="rec-2"></span>
			<span class="rec-3"></span>
			<span class="rec-4"></span>
		</div>
	</section><section>
		<div class="row">
			<div class="col-xs-4">
				<div class="portait-l-box">
					<div class="portait-s oh beCircle center-block">
						<img src="img/portrait2.jpg" alt=""/>
					</div>
					<p class="title-name z-green text-center">你今天充值了嘛</p>
				</div>
			</div>
			<div class="col-8-table col-xs-8">
				<div class="rec-parent table-wrapper">
					<table>
						<tr>
							<th>评分</th>
							<th>KDA</th>
							<th>金钱</th>
						</tr>
						<tr class="s-td">
							<td>9.8</td>
							<td>6/1/3</td>
							<td>8.6K</td>
						</tr>
					</table>
					<span class="rec-1"></span>
					<span class="rec-2"></span>
					<span class="rec-3"></span>
					<span class="rec-4"></span>
				</div>
			</div>
		</div>
		<div class="rec-parent table-wrapper">
			<table>
				<tr>
					<th>补兵&野怪</th>
					<th>输出伤害</th>
					<th>承受伤害</th>
					<th>插&反眼</th>
				</tr>
				<tr class="s-td">
					<td>250</td>
					<td>10730</td>
					<td>22038</td>
					<td>7/0</td>
				</tr>
			</table>
			<span class="rec-1"></span>
			<span class="rec-2"></span>
			<span class="rec-3"></span>
			<span class="rec-4"></span>
		</div>
	</section><section>
		<div class="row">
			<div class="col-xs-4">
				<div class="portait-l-box">
					<div class="portait-s oh beCircle center-block">
						<img src="img/portrait2.jpg" alt=""/>
					</div>
					<p class="title-name z-green text-center">你今天充值了嘛</p>
				</div>
			</div>
			<div class="col-8-table col-xs-8">
				<div class="rec-parent table-wrapper">
					<table>
						<tr>
							<th>评分</th>
							<th>KDA</th>
							<th>金钱</th>
						</tr>
						<tr class="s-td">
							<td>9.8</td>
							<td>6/1/3</td>
							<td>8.6K</td>
						</tr>
					</table>
					<span class="rec-1"></span>
					<span class="rec-2"></span>
					<span class="rec-3"></span>
					<span class="rec-4"></span>
				</div>
			</div>
		</div>
		<div class="rec-parent table-wrapper">
			<table>
				<tr>
					<th>补兵&野怪</th>
					<th>输出伤害</th>
					<th>承受伤害</th>
					<th>插&反眼</th>
				</tr>
				<tr class="s-td">
					<td>250</td>
					<td>10730</td>
					<td>22038</td>
					<td>7/0</td>
				</tr>
			</table>
			<span class="rec-1"></span>
			<span class="rec-2"></span>
			<span class="rec-3"></span>
			<span class="rec-4"></span>
		</div>
	</section><section>
		<div class="row">
			<div class="col-xs-4">
				<div class="portait-l-box">
					<div class="portait-s oh beCircle center-block">
						<img src="img/portrait2.jpg" alt=""/>
					</div>
					<p class="title-name z-green text-center">你今天充值了嘛</p>
				</div>
			</div>
			<div class="col-8-table col-xs-8">
				<div class="rec-parent table-wrapper">
					<table>
						<tr>
							<th>评分</th>
							<th>KDA</th>
							<th>金钱</th>
						</tr>
						<tr class="s-td">
							<td>9.8</td>
							<td>6/1/3</td>
							<td>8.6K</td>
						</tr>
					</table>
					<span class="rec-1"></span>
					<span class="rec-2"></span>
					<span class="rec-3"></span>
					<span class="rec-4"></span>
				</div>
			</div>
		</div>
		<div class="rec-parent table-wrapper">
			<table>
				<tr>
					<th>补兵&野怪</th>
					<th>输出伤害</th>
					<th>承受伤害</th>
					<th>插&反眼</th>
				</tr>
				<tr class="s-td">
					<td>250</td>
					<td>10730</td>
					<td>22038</td>
					<td>7/0</td>
				</tr>
			</table>
			<span class="rec-1"></span>
			<span class="rec-2"></span>
			<span class="rec-3"></span>
			<span class="rec-4"></span>
		</div>

		<div class="row">
			<div class="col-xs-4">
				<div class="portait-l-box">
					<div class="portait-s oh beCircle center-block">
						<img src="img/portrait2.jpg" alt=""/>
					</div>
					<p class="title-name z-green text-center">你今天充值了嘛</p>
				</div>
			</div>
			<div class="col-8-table col-xs-8">
				<div class="rec-parent table-wrapper">
					<table>
						<tr>
							<th>评分</th>
							<th>KDA</th>
							<th>金钱</th>
						</tr>
						<tr class="s-td">
							<td>9.8</td>
							<td>6/1/3</td>
							<td>8.6K</td>
						</tr>
					</table>
					<span class="rec-1"></span>
					<span class="rec-2"></span>
					<span class="rec-3"></span>
					<span class="rec-4"></span>
				</div>
			</div>
		</div>
		<div class="rec-parent table-wrapper">
			<table>
				<tr>
					<th>补兵&野怪</th>
					<th>输出伤害</th>
					<th>承受伤害</th>
					<th>插&反眼</th>
				</tr>
				<tr class="s-td">
					<td>250</td>
					<td>10730</td>
					<td>22038</td>
					<td>7/0</td>
				</tr>
			</table>
			<span class="rec-1"></span>
			<span class="rec-2"></span>
			<span class="rec-3"></span>
			<span class="rec-4"></span>
		</div>
	</section>
	</div>
</div>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	window.onload=function(){
		var bar_width=document.querySelector('.rate-shadow').offsetWidth;
		$('.rate-progress').each(function(){
			var temp_str=$(this).text(),
					num=parseFloat(temp_str.split("%"));
			$(this).css({
				'width':bar_width*num*0.01+'px',
				'transition':0.01*num+'s width ease-out',
				'-webkit-transition':0.01*num+'s width ease-out'
			})
		})
		countScrollHeight('details-team-note','details-wrapper');
	}

</script>
</body>
</html>
